<template>
  <!--<el-button color="#626aef" :dark="isDark" plain icon="Download" @click="handleOut"
    >导出</el-button
  >-->
  <div class="home-box">
    <el-form :inline="true" :model="PageForm">
      <el-form-item label="岗位名称">
        <el-input
          v-model="PageForm.position"
          placeholder="岗位名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="创建时间" style="width: 18.75rem">
  		  
       
       <el-date-picker
         v-model="PageForm.time"
         type="month"
         placeholder="选择月"
       		value-format="YYYY-MM"
       		:disabledDate="check">
       </el-date-picker>
  		
      </el-form-item>
      <el-form-item>
        <el-button @click="searchEvent" type="primary">查询 </el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="update" type="primary">重置 </el-button>
      </el-form-item>
      <el-form-item >
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button circle icon="Refresh" @click="update" />
        </el-tooltip>
      </el-form-item>
    </el-form>
  </div>
  
  <el-table :data="PositionList" style="width: 95%;margin:20px; border-radius: 5px;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);" size="large" 
    :header-cell-style="{
          'background': '#337ecc !important',
          'color': '#ffffff',
          'border': 'none !important'
        }">
    <el-table-column prop="position" label="岗位" width="180" class-name="my-content">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>备注：{{ scope.row.ins }}</div>
          </template>
          <template #reference>
            {{ scope.row.position }}
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column prop="fourthAssessorName" label="初审人员" width="120" />
    <el-table-column prop="fourthTimer" label="初审限时" width="120">
      <template #default="scope">
        {{
        scope.row.fourthTimer === 'PT12H' ? '12小时' : 
         scope.row.fourthTimer === 'P1D' ? '24小时' : 
         scope.row.fourthTimer === 'PT36H' ? '36小时' : 
         scope.row.fourthTimer === 'P2D' ? '48小时' : 
		 scope.row.fourthTimer === 'PT60H' ? "60小时":"72小时"
         }}
      </template>
    </el-table-column>
    <el-table-column prop="thirdAssessorName" label="二次审核人员" width="120" />
    <el-table-column prop="thirdTimer" label="二次审核限时" width="120">
      <template #default="scope">
        {{
        scope.row.thirdTimer === 'PT12H' ? '12小时' : 
         scope.row.thirdTimer === 'P1D' ? '24小时' : 
         scope.row.thirdTimer === 'PT36H' ? '36小时' : 
         scope.row.thirdTimer === 'P2D' ? '48小时' : 
		 scope.row.thirdTimer === 'PT60H' ? "60小时":"72小时"
         }}
      </template>
    </el-table-column>
    <el-table-column prop="secondAssessorName" label="三次审核人员" width="120" />
    <el-table-column prop="secondTimer" label="三次审核限时" width="120">
      <template #default="scope">
        {{
        scope.row.secondTimer === 'PT12H' ? '12小时' : 
         scope.row.secondTimer === 'P1D' ? '24小时' : 
         scope.row.secondTimer === 'PT36H' ? '36小时' : 
         scope.row.secondTimer === 'P2D' ? '48小时' : 
		 scope.row.secondTimer === 'PT60H' ? "60小时":"72小时"
         }}
      </template>
    </el-table-column>
    <el-table-column prop="updateTime" label="最后更新时间" >
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <pagination
    class="pagination"
    v-show="PositionPage.total > 0"
    :total="PositionPage.total"
    v-model:page="PositionPage.page"
    v-model:limit="PositionPage.page_size"
    @pagination="handlePagination"
  />
</template>


<script setup>
import {ref, onMounted,onBeforeMount, reactive,watch} from "vue";
import { Timer } from '@element-plus/icons-vue';
import {useRouter} from "vue-router";
import {getAssessorPastPage,assessorPastSearch} from '@/api/assessor'
import { ElMessage } from 'element-plus'

const PageForm = ref({
  page: 1,
  page_size: 10,
  time:"",
  position:""
});
const PositionPage=ref([])
const PositionList=ref([])
onBeforeMount(()=>{
    getAssessorPastPage(PageForm.value)
    .then(data=>{
        PositionPage.value=data.data;
        PositionList.value=data.data.records;
    });
})

watch(PositionList, (newVal) => {
  
}, { deep: true })

const handlePagination=()=>{
    if(PageForm.value.position==""){
      getAssessorPastPage(value)
      .then(data=>{
          PositionPage.value=data.data;
          PositionList.value=data.data.records;
      });
    }
    else{
      PageForm.value.page=value.page;
      PageForm.value.page_size=value.page_size
      assessorPastSearch(PageForm.value).then(data=>{
        PositionPage.value=data.data;
        PositionList.value=data.data.records;
      })
    }
}

const searchEvent=()=>{
  assessorPastSearch(PageForm.value).then(data=>{
      PositionPage.value=data.data;
      PositionList.value=data.data.records;
    })
}


const update=()=>{
	PageForm.value.position=""
    getAssessorPastPage(PageForm.value)
    .then(data=>{
      if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      PositionPage.value=data.data;
        PositionList.value=data.data.records;
    } else {
      ElMessage.error("更新失败");
    }
    });
}


const now = new Date();
const year = now.getFullYear();
// 获取当前月份（注意：月份从0开始，所以需要加1）
const month = now.getMonth() == 0? 12:now.getMonth();
// 格式化为 YYYY-MM 形式
const yearMonth = `${year}-${month < 10 ? '0' : ''}${month}`;

PageForm.value.time = yearMonth

const check = (time)=>{
	 return time.getTime() > new Date(new Date().toLocaleDateString()).getTime() - 31 * 24 * 3600 * 1000;
}
watch(PageForm.value, (newValue, oldValue) => {
	searchEvent()
}, { deep: true });

</script>

<style lang="scss" scoped>
:deep(.my-content) {
  background:#ECF5FF !important;
  font-size: 15px;
}
.pagination {
    margin: 20px 50px;
    display: flex;
    justify-content: end;
}
</style>
